<template>
  <div class="video">
    <video
      v-if="!isError && types === 'flv'"
      class="video-component"
      :id="flvId"
      ref="videoElement"
      controls
      loop
      :poster="poster"
      autoplay="autoplay"
      muted="muted"
    >Your browser is too old which doesn't support HTML5 video.</video>
    <video
      class="video-js vjs-default-skin vjs-big-play-centered"
      v-else-if="!isError && types === 'm3u8'"
      :id="videoId"
      controls
      loop
      width="100%"
      height="195"
      :poster="poster"
      muted="muted"
    >
      <source :src="url" type="application/x-mpegURL" />
    </video>
    <div v-if="isError" class="error">未获取到视频内容</div>
  </div>
</template>
<script>
import flvjs from 'flv.js'
import videojs from 'video.js'
import 'videojs-contrib-hls'
import 'video.js/dist/video-js.css'
import { getUuid } from '@/utils'
export default {
  name: 'myVideo',
  props: {
    poster: {
      type: String,
      default: ''
    },
    types: {
      type: String,
      default: 'flv'
    },
    url: {
      types: String,
      default: ''
    }
  },
  data() {
    return {
      isError: false,
      player: null,
      videoId: '', // 生成唯一id 值， 避免重复id 报错
      flvId: ''
    }
  },
  watch: {
    url() {
      // url 改变 销毁之前的控件
      if (this.player) {
        this.player.detachMediaElement && this.player.detachMediaElement()
        // this.player.destroy && this.player.destroy()
      }
    
      this.videoId = `myVideo${getUuid()}`
      console.log('urlChange', this.videoId)
      this.$nextTick(() => {
        this.createVideo()
      })
    }
  },
  created() {
    this.init()
  },
  mounted() {
    this.videoId = `myVideo${getUuid()}`

    this.$nextTick(() => {
      this.createVideo()
    })
  },
  beforeDestory() {
    console.log('beforeDestory')
  },
  deactivated() {
    this.player.destroy && this.player.destroy()
    // this.player.dispose && this.player.dispose()
  },
  methods: {
    init() {
      this.flvId = `myVideo${getUuid()}`
      this.videoId = `myVideo${getUuid()}`
    },
    createVideo() {
      //  直播流为flv 格式,  回放是m3u8 格式 ,根据不同类型选择不同控件初始化
      if (this.types === 'flv') {
        const videoElement = this.$refs.videoElement
        this.player = flvjs.createPlayer({
          type: this.types,
          url: this.url
        })
        this.player.attachMediaElement(videoElement)
        this.player.load()
        this.player.play()
        this.player.on('error', err => {
          this.isError = true
        })
      } else {
        // this.player.reset && this.player.reset()
        this.player = videojs(
          this.videoId,
          {
            autoplay: false, // 自动播放
            controls: true, // 是否显示控制栏
            bigPlayButton: true,
            textTrackDisplay: false,
            posterImage: true,
            errorDisplay: false,
            controlBar: true,
            // ControlBar: {
            //   customControlSpacer: true
            // }
          },
          function() {
            setTimeout(() => {
              //  this.play()
            }, 200)
          }
        )
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.error {
  display: inline-block;
  font-size: 16px;
  color: red;
  width: 100%;
  height: 195px;
  line-height: 195px;
  background: #333;
  color: #fff;
}
.video-js {
  width: 100%;
}
.video-js .vjs-tech{
  height: 100%!important;
}
</style>